<template>
  <!-- 分类组件 -->
  <div id="app">
    <searchBar :value="'0'"/>
    <van-row>
      <van-col class="leftcate van-hairline--right contain" span="6">
        <div class="contain">
          <van-badge-group :active-key="leftActive" @change="onLeftCateClick">
            <van-badge class="leftItem" v-for="(cate, index) in catelist" :key="cate.gc_id" :title="cate.gc_name"/>
          </van-badge-group>
        </div>
      </van-col>
      <van-col class="rightcate" span="18">
        <div class="contain">
          <van-row>
            <van-col v-for="(subcate,index) in subcatelist" :key="subcate.gc_id"  span="8">
              <div class="sub_thumb" @click="redirect('/goodsList')">
                <img :src="subcate.pic" />
              </div>
              <h4 @click="redirect('/goodsList')">>{{subcate.gc_name}}</h4>
            </van-col>
          </van-row>
        </div>
      </van-col>
    </van-row>
    <van-tabbar v-model="tabarActive">
      <van-tabbar-item icon="wap-home" @click="redirect('/')">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" dot  @click="redirect('/cate')" >分类</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart" :info="cartInfo" url="redirect('/shoppingCart')">购物车</van-tabbar-item>
      <van-tabbar-item icon="contact" dot url="redirect('/me')">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  import { mapState,mapActions,mapGetters } from 'vuex';
  import SearchBar from './searchBar'
  export default {
    name: 'cate',
    components:{

      SearchBar
    },
    data() {
      return {
        tabarActive:1,
        cartInfo:1,
        mainActiveIndex:0,
        activeId:0,
        catelist:[],
        cateidxarr:[],
        leftActive:0,
        subcatelist:[],
      }
    },
    methods: {
      onLeftCateClick(key) {
        this.leftActive = key;
        this.subcatelist = this.catelist[this.cateidxarr[this.leftActive]].class2
      },
      onItemClick(data) {
        this.activeId = data.id;
      },
      redirect(url) {
        this.$router.push(url);
      },
      get_first_key(data){
        for (var key in data)
          return key;
      }
    },
    watch: {

    },

    beforeCreate() {
    },
    created() {
      this.$fetch("/category/goods").then((res)=>{
        this.catelist = res.data.header_categories
        this.cateidxarr = Object.keys(res.data.header_categories);
        this.subcatelist = this.catelist[this.cateidxarr[this.leftActive]].class2;
        console.log(this.subcatelist)
      })
    }
  }
</script>

<style lang="less" scoped>
  @import url('../assets/css/cate.less');
</style>

